<template>
    <div v-show="content" class="wrap" :style="{'line-height':h,'height':h,'width':w}">
        <div style="
        position: relative;
    display: inline-block;
    line-height: 1.8;">
            <div class="bg"><span>{{content}}</span></div>
            <div class="content"><span>{{content}}</span></div>
        </div>
    </div>
</template>

<script type="text/babel">
    var toastTask;
    export default{

        data(){
            return {
                content: null,
                h: db.h + 'px',
                w: db.w + 'px'
            };
        },

        ready: function () {
            var self = this;
            this.$on('toast', function (content) {
                if (typeof content == 'object')
                    self.content = JSON.stringify(content);
                else
                    self.content = content;

                console.log('toast',content);

                if (toastTask)
                    clearTimeout(toastTask);

                toastTask = setTimeout(function () {
                    self.content = null;
                }, 1000);
            });
        },
        methods: {}
    }
</script>

<style scoped>
    .wrap {
        position: fixed;
        z-index: 1000;
        text-align: center;
        font-size: 12px;
        top: 0;
    }

    .bg {
        background-color: #000;
        opacity: 0.6;
        padding: 8px;
        display: inline-block;
        margin: 8px;
        word-break: break-all;
        line-height: 1.8;
        border-radius: 2px;
    }

    .content {
        color: #fff;
        padding: 8px;
        display: inline-block;
        margin: 8px;
        left: 0;
        position: absolute;
        top: 0;
        word-break: break-all;
        line-height: 1.8;
        border-radius: 2px;
    }
</style>
